@page "/File-Upload/Preload-Files"

@using Syncfusion.Blazor.Inputs
@using Syncfusion.Blazor.Buttons

@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample demonstrates how to pre-load the files of the Uploader. The already uploaded files are configured in file list to view and remove them.</p>
</SampleDescription>
<ActionDescription>
  <p>The Uploader component allows to load initial list of files which are already uploaded in the server. The preload files are useful to view and remove from server. Also, you can achieve state persistence on page refresh. </p>
  <p>For more information, you can refer to the Preload Files section from this <a target='_blank' href='https://blazor.syncfusion.com/documentation/file-upload/async/#preload-files'> documentation section</a>.</p> 
</ActionDescription>

<div class="col-lg-12 control-section">
    <div class="control_wrapper">
        <SfUploader ID="UploadFiles" DropArea=".control-fluid" @ref="UploaderObj">
            <UploaderFiles>
                <UploaderUploadedFiles Name="Nature" Size=500000 Type=".png"></UploaderUploadedFiles>
                <UploaderUploadedFiles Name="TypeScript Succinctly" Size=12000 Type=".pdf"></UploaderUploadedFiles>
                <UploaderUploadedFiles Name="ASP.NET Webhooks" Size="500000" Type=".docx"></UploaderUploadedFiles>
            </UploaderFiles>
            <UploaderAsyncSettings SaveUrl="https://aspnetmvc.syncfusion.com/services/api/uploadbox/Save" RemoveUrl="https://aspnetmvc.syncfusion.com/services/api/uploadbox/Remove"></UploaderAsyncSettings>
        </SfUploader>
    </div>
</div>
<div class="col-lg-4 property-section">
    <div id="property" title="Properties">
        <div class="padding-top">
            <SfButton @onclick="@ClearFiles">Clear All</SfButton>
        </div>
    </div>
</div>

<style>
    .control_wrapper {
        max-width: 500px;
        margin: auto;
    }

    .e-upload {
        width: 100%;
        position: relative;
        margin-top: 15px;
    }

    .padding-top {
        margin-left: 50px;
        padding-top: 25px;
    }
</style>

@code {
    public SfUploader UploaderObj;
    private void ClearFiles()
    {
        this.UploaderObj.ClearAllAsync();
    }
}